<template>
  <div class="sea-table-header">
    <el-row>
      <el-col :span="8">
        <!-- 允许设置一个标题-->
        <slot name="title"></slot>

        <div style="margin-top: 8px;">
          <!-- 操作按钮区 -->
          <div class="pull-left" style="margin-right: 16px;">
            <slot name="buttons"></slot>
          </div>

          <!-- 快捷查询 -->
          <el-form @submit.native.prevent="onSubmit">
            <el-input v-model="keyword" placeholder="请输入内容" style="width: 200px;" size="small">
              <el-button slot="append" icon="fa fa-search" @click="onSubmit" :loading="loading"></el-button>
            </el-input>
          </el-form>
        </div>
      </el-col>
      <el-col :span="16" v-if="!disabledForm">
        <div style="width: calc(100% - 36px);float: left;">
          <el-row>
            <el-form ref="form" v-model="params" v-show="expand" :inline="true">

              <!-- 输入框区域 -->
              <slot name="input"></slot>

              <el-form-item>
                <el-button size="small" type="primary" @click="onSubmit" :loading="loading">查询</el-button>
                <el-button size="small" @click="onReset" :loading="loading">重置</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </div>

        <!-- 展开按钮 -->
        <div style="width: 32px;float: right;">
          <el-button size="small" title="展开" @click="switchExpand"
                     :icon="expand? 'fa fa-chevron-up' : 'fa fa-chevron-down'"></el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
/* eslint-disable */

/**
 * el-form 兼容表头
 *
 * 可以使用原生的组件，只不过界面布局需要自己处理。
 * 与 smart-form 相比，编码更加自由；
 * 相对的，需要自己处理很多逻辑，比如：数据联动、界面布局。
 */
export default {
    name: "SeaTableHeader"
    , components: {}
    // 通过 inject，直接获取 dataTable 对象实例
    , inject: ['dataTable']
    , props: {
        // 表单参数
        params: {type: Object, default: undefined}
        // 表单参数格式化，默认使用 Layers 的序列化函数
        , formatter: {type: Function, default: undefined}
        // 禁用表单
        , disabledForm: {type: Boolean, default: false}
    }
    , data() {
        return {
            // 展开表单
            expand: false
            // 默认值
            , defaultValue: {}
            // 关键字
            , keyword: ''
        }
    }
    , computed: {
        loading: function () {
            return this.dataTable.loading;
        }
    }
    , mounted() {
        // 记录表单初始值
        Layers.copy(this.params, this.defaultValue);
    }
    , methods: {
        /**
         * 面板全屏展示
         */
        fullscreen: function () {
            this.dataTable.fullscreen();
        }
        /**
         * 展开搜索栏，默认搜索栏处于隐藏状态
         */
        , switchExpand: function () {
            this.expand = !this.expand
        }
        /**
         * 提交表单
         */
        , onSubmit: function () {
            let params = this.serialize();
            params.keyword = this.keyword;
            this.dataTable.handlerParams(params);
        }
        /**
         * 重置表单
         *
         * 恢复初始状态，并处罚提交事件
         */
        , onReset: function () {
            Layers.copy(this.defaultValue, this.params);
            this.onSubmit();
        }
        /**
         *
         * 序列化表单
         */
        , serialize: function () {
            if (this.disabledForm) {
                return {};
            } else {
                if (Layers.isNotBlank(this.formatter)) {
                    // 采用用户指定的序列化函数
                    return this.formatter(this.params);
                } else {
                    // 使用通用的序列化函数
                    return Layers.serialize(this.params);
                }
            }
        }
    }
}
</script>
